<template>
  <div class="home-page">
    <nav-header></nav-header>

    <el-header class="clearfix"
               style="height: 120px">
      <div class="logo">
        <img style="height: 120px"
             src="~assets/image/logo.png" />
      </div>
      <div style="float:left; padding:30px 0px;"><img src="~assets/image/保障.png"
             alt=""
             width="350px"></div>
      <div class="search">
        <div>
          <el-tag type="warning">药品</el-tag>
        </div>
        <div class="search-item">
          <el-input style="width: 200px"
                    placeholder="请输入商品名称"
                    prefix-icon="el-icon-search"
                    v-model="serName">
          </el-input>
          <el-button style="margin-left: 10px"
                     icon="el-icon-search"
                     circle
                     @click="search"></el-button>
        </div>
        <div class="hotword">
          热门搜索词：肾宝片&nbsp;&nbsp;&nbsp;999&nbsp;&nbsp;&nbsp;口服液&nbsp;&nbsp;&nbsp;减肥药品&nbsp;&nbsp;&nbsp;
        </div>
      </div>
    </el-header>
    <div class="main">
      <span style="background-color: #00CBAB; font-size: 18px; padding:10px; color:white; font-weight:800;"
            class="demonstration">热门药品，你值得拥有</span>
      <div class="focus_main">
        <el-carousel style="width: 1000px; margin: auto">
          <el-carousel-item v-for="item in tuiJianImgList"
                            :key="item">
            <el-image style="width: 800px; height: 300px"
                      fit="fill"
                      :src="item"></el-image>
          </el-carousel-item>
        </el-carousel>
        <div class="category">
          <div>
            <ul class="clearfix"
                style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3)">
              <li :class="{changeStyle: changeStyle === 0}"><a href="javascript: ;"
                   @click="selectMedicalList()">精选 ｜ 猜你喜欢</a></li>
              <li :class="{changeStyle: changeStyle === 1}"><a href="javascript: ;"
                   @click="selectMedicalList(1)">感冒用药</a></li>
              <li :class="{changeStyle: changeStyle === 2}"><a href="javascript: ;"
                   @click="selectMedicalList(2)">营养药品</a></li>
              <li :class="{changeStyle: changeStyle === 3}"><a href="javascript: ;"
                   @click="selectMedicalList(3)">肠胃药品</a></li>
              <li :class="{changeStyle: changeStyle === 4}"><a href="javascript: ;"
                   @click="selectMedicalList(4)">减脂药品</a></li>
            </ul>
          </div>
        </div>
        <div class="medical-show">
          <ul class="clearfix">
            <li v-for="(item, index) in medicineList"
                :key="index">
              <img style="width: 190px; height: 190px"
                   :src="item.src"
                   @click="goToBuy(item.medInfoId)" />
              <div class="info_name">{{ item.medName }}</div>
              <div style="color: #e1251b"
                   class="info_price">
                <span>¥ </span><span style="font-size: 20px">{{ item.medPrice }}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="pagination">
          <el-pagination @current-change="currentChange"
                         background
                         :current-page="page"
                         :page-size="pageSize"
                         layout="total, prev, pager, next, jumper"
                         :total="total"></el-pagination>
        </div>
        <div>
          <img src="~assets/image/底部.png"
               width="1000px"
               alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navHeader from 'components/navHeader.vue'
import { request } from 'network/request.js'

export default {
  components: { navHeader },
  data() {
    return {
      serName: '',
      tuiJianImgList: [
        require('assets/image/medical_pics/1.jpg'),
        require('assets/image/medical_pics/2.jpg'),
        require('assets/image/medical_pics/3.jpg'),
        require('assets/image/medical_pics/4.jpg'),
        require('assets/image/medical_pics/5.jpg'),
      ],
      medicineList: [],
      page: 1,
      pageSize: 15,
      total: 0,
      changeStyle: 0,
    }
  },

  created() {
    this.getMedicalList()
  },

  methods: {
    goToBuy(medInfoId) {
      this.$router.push({
        path: '/buy',
        query: { medInfoId },
      })
    },

    currentChange(val) {
      this.page = val
      this.getMedicalList()
    },

    selectMedicalList(medCategory = '') {
      if (!medCategory) {
        this.changeStyle = 0
      } else {
        this.changeStyle = medCategory
      }
      this.page = 1
      this.getMedicalList(medCategory)
    },

    async getMedicalList(medCategory = '') {
      const res = await request({
        url: '/medicine/',
        params: { page: this.page, pageSize: this.pageSize, medCategory },
      })
      if (res.code !== 1) {
        return this.$message({
          type: 'error',
          message: res.message,
        })
      }
      const { count, data } = res
      this.total = count
      this.medicineList = data
      this.medicineList.forEach((item) => {
        item.src = require(`assets/image/medical_pics/${item.medName}.jpg`)
      })
    },

    async search() {
      const { data, count } = await request({
        url: '/medicine/search',
        params: {
          page: 1,
          pageSize: 15,
          serName: this.serName,
        },
      })
      this.medicineList = data
      this.total = count
      this.medicineList.forEach((item) => {
        item.src = require(`assets/image/medical_pics/${item.medName}.jpg`)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.changeStyle {
  color: red;
  background-color: #00ccff;
}

.liStyle(@height, @fontSize) {
  width: 19.9%;
  height: @height;
  font-size: @fontSize;
  float: left;
  cursor: pointer;
}
.home-page {
  background: #ffffff;
  .el-header {
    width: 1000px;
    margin: 10px auto;
    background: #fff;
    .logo {
      float: left;
    }
    .search {
      float: right;
      padding: 10px 0px;
      .search-item {
        padding: 10px 0;
      }
      .hotword {
        font-size: 10px;
        color: #959595;
        padding-top: 8px;
      }
    }
  }
  .main {
    width: 1000px;
    margin: 50px auto;
    text-align: center;
    .demonstration {
      color: #475669;
      font-size: 14px;
      display: inline-block;
      margin-bottom: 20px;
    }
    .focus_main {
      .category {
        margin-top: 20px;
        background-color: #fff;
        li {
          .liStyle(60px, 14px);
          line-height: 60px;
          border-right: 1px solid #96c2f1;
          a {
            color: #333;
          }
          a:hover {
            color: red;
          }
        }
      }
      .medical-show {
        margin-top: 30px;

        ul > li {
          background-color: #fff;
          .liStyle(280px, 14px);
          width: 19%;
          margin: 0 10px 10px 0;
          color: #666;
          .info_name {
            margin: 15px 0;
          }
        }
      }
    }
  }
}
</style>
